<template>
  <Modal :visible="visible" @cancel="clearSignatureModal">
    <div>
      <input id="colorPicker" type="color" v-model="selectedColor">
    </div>
    <div class="flow-pass-signature">
      <VueSignaturePad ref="signaturePad" :options="signaturePadOptions"/>
    </div>
    <Button style="margin: 10px" type="primary" slot="footer" @click="clearSignature">清空签名</Button>
    <Button style="margin: 10px" type="primary" slot="footer" @click="saveSignature">保存签名</Button>
    <Button style="margin: 10px" slot="footer" @click="clearSignatureModal">取消</Button>
  </Modal>
</template>

<script>
import {VueSignaturePad} from 'vue-signature-pad';
import {Button, Modal} from "ant-design-vue";
import {createModelProps, createProps} from '@/utils';

export default {
  name: "FlowSketchpad",
  model: createModelProps(),
  props: {
    value: createProps(String),
  },
  components: {
    VueSignaturePad,
    Button,
    Modal
  },
  data() {
    return {
      signaturePadOptions: {
        penColor: '#000', // 画笔颜色
        minWidth: 1, // 画笔最小宽度
        maxWidth: 3, // 画笔最大宽度
      },
      visible: false,
      selectedColor: '#000000' // 默认颜色为白色
    };
  },
  methods: {
    clearSignature() {
      this.$refs.signaturePad.clearSignature();
    },
    saveSignature() {
      const data = this.$refs.signaturePad.saveSignature();
      this.$emit('customEvent', data.data);
      this.$emit('change', data.data);
      this.visible = false;
    },
    clearSignatureModal() {
      this.clearSignature();
      this.visible = false;
    },
    openSignatureModal() {
      this.visible = true;
    }
  },
  watch: {
    // 监听 'selectedColor' 属性
    selectedColor(newValue, oldValue) {
      const signaturePad = this.$refs.signaturePad.signaturePad;
      signaturePad.penColor = newValue;
    }
  },
};
</script>

<style scoped>
.flow-pass-signature {
  border: 2px solid #000000;
  margin-top: 20px;
}
</style>
